<template>
	<div class="card">
		<el-card>
			<template #header>
				<div class="card-header">
					<span>{{ title ?? '15栋-315房间-张三' }}</span>
					<p v-if="stuId" :style="{'font-size':'12px'}">{{ `学号：${stuId}` }}</p>
				</div>
			</template>

			<div>内容：</div>
			<div class="body" @click="handleShowDetials">
				{{ containt ?? '举止大方害死的发生的电视剧分页死哦阿胶大小姐加工费UI' }}
				<span v-if="containt?.length == 20">...</span>
			</div>
			<template #footer>
				<div class="time">发布日期：{{ new Date(time).toLocaleDateString() ?? '2023-10-12' }}</div>
				<slot name="btn" class="footer"> </slot>
			</template>

			<!-- 通告详情 -->
			<el-dialog width="400" :title="`${new Date(time).toLocaleDateString()}日的留言详情`" v-model="showDetials" :show-close="false">
				<p class="text">
					{{ detials.content }}
				</p>
				<template #footer>
					<el-button link type="primary" @click="handleClose">关闭</el-button>
				</template>
			</el-dialog>
		</el-card>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { queryMessageDetail } from '@/utils/axios/domiRequests'

const props = defineProps(['time', 'containt', 'title', 'msgId','stuId'])
const $emit = defineEmits(['change-status'])

const showDetials = ref(false)

const detials = ref()

const handleClose=()=>{
	showDetials.value=false
	$emit('change-status', '已阅读')
}

const handleShowDetials = async () => {
	let { data } = await queryMessageDetail({ msgId: parseInt(props.msgId) })
	detials.value = data[0]
	showDetials.value = true
	
}
</script>

<style scoped lang="scss">
$gradient-direction: -45deg;
$color1: rgb(0, 247, 167);
$color2: rgb(5, 241, 245);
$background: linear-gradient($gradient-direction, $color1, $color2);

.text {
	color: $color2;
	text-indent: 2rem;
}
.card-header {
	text-align: center;
}

.body {
	text-indent: 2rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card {
	width: 210px;
	height: 210px;
}

.el-card {
	--el-card-padding: 10px;
	width: 202px;
	height: 100%;
	background: $background;
	border-radius: 20px;
	color: #fff;
	&:deep(.el-card__header) {
		border: none;
	}

	&:deep(.el-card__footer) {
		border: none;
	}
}
</style>
